<template>
  <div class="header">
    <ul>
      <li><router-link to="/cssCase1">cssCase1</router-link></li>
      <li><router-link to="/cssCase2">cssCase2</router-link></li>
      <li><router-link to="/jsCase1">jsCase1</router-link></li>
      <li><router-link to="/jsCase2">jsCase2</router-link></li>
      <li><router-link to="/web1">web1</router-link></li>
      <li><router-link to="/web2">web2</router-link></li>
      <li><router-link to="/web3">web3</router-link></li>
    </ul>
  </div>
</template>
<script>
export default {
  name: "v-header",
  
};
</script>
<style lang='scss' scoped>
.header {
  height: 50px;
  line-height: 50px;
  background: #999;
  color: #fff;
  ul {
    width: 1200px;
    height: 100%;
    margin: 0 auto;
    display: flex;
    li {
      cursor: pointer;
      flex: 1;
    }
    li:hover {
      background: #aaa;
      color: #fff;
    }
    .active {
      background: #fff;
      color: blue;
      border-bottom: 1px solid blue;
    }
    a{
      display: inline-block;
      width:100%;height:100%;
    }
  }
}
</style>